<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>库存报表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        #top {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        #contexttop {
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 4px;
            margin-bottom: 15px;
        }
        #tab {
            width: 100%;
            border-collapse: collapse;
        }
        #tab th, #tab td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        #tab th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        #tab tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .low-stock {
            background-color: #ffebee;
        }
        #contextbotton {
            background: white;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 4px;
            text-align: center;
        }
        input[type="text"], input[type="button"] {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        input[type="button"] {
            background: #4285f4;
            color: white;
            border: none;
            cursor: pointer;
        }
        input[type="button"]:hover {
            background: #3367d6;
        }
        a {
            color: #4285f4;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        .detail-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            z-index: 1000;
            width: 400px;
            max-width: 90%;
        }

        .detail-popup h3 {
            margin-top: 0;
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .detail-popup p {
            margin: 10px 0;
        }

        .detail-popup button {
            margin-top: 15px;
            padding: 8px 15px;
            background: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .detail-popup button:hover {
            background: #3367d6;
        }
    </style>
    <script type="text/javascript" src="/warehouse_manage/js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function (){
            var param = new URLSearchParams(window.location.search);
            var pageNo = param.get("pageNo");
            var likeValue = param.get("likeValue");
            selectByPage(pageNo,likeValue);
            selectBytotal();
            //点击查询按钮
            $("#selectByValue").click(function (){
                var likeValueStr = $.trim($("#likeValueStr").val());
                selectByPage(1,likeValueStr);
            })
        })

        function selectByPage(pageNo, likeValue){
            var url = "/warehouse_manage/selectByPage.report";
            var paramObj = {
                "pageNo": pageNo,
                "likeValue": likeValue
            };

            $.post(url, paramObj, function(data) {
                $("#tbodyList").empty();
                var jsonObj = JSON.parse(data);
                var recordList = jsonObj.recordList;

                for (var i = 0; i < recordList.length; i++) {
                    var item = recordList[i];
                    $("<tr><td>" + item.productId + "</td><td>"
                        + item.productName + "</td><td>"
                        + item.category + "</td><td>"
                        + item.stockQuantity + "</td><td>"
                        + item.warningThreshold + "</td><td>"
                        + item.totalValue + "￥</td><td>"
                        + item.inBoundTotal + "</td><td>"
                        + item.outBoundTotal + "</td><td>"
                        + (item.stockQuantity < item.warningThreshold ? "库存不足" : "正常") + "</td></tr>")
                        .appendTo($("#tbodyList"));
                }

                // 更新分页信息
                $("#likeValueStr").val(jsonObj.likeValue);
                $("#recordCount").text(jsonObj.recordCount);
                $("#totalPages").text(jsonObj.totalPages);
                $("#pageNo").text(jsonObj.pageNo);


                $("#firstPage").prop("href", "/warehouse_manage//toReport.report?pageNo=1&likeValue=" + jsonObj.likeValue)// 首页
                if (jsonObj.pageNo != 1)
                    $("#prevPage").prop("href", "/warehouse_manage//toReport.report?pageNo=" + (jsonObj.pageNo - 1) + "&likeValue=" + jsonObj.likeValue)// 上一页

                if (jsonObj.pageNo != jsonObj.totalPages)
                    $("#nextPage").prop("href", "/warehouse_manage//toReport.report?pageNo=" + (jsonObj.pageNo + 1) + "&likeValue=" + jsonObj.likeValue)// 下一页

                $("#tailPage").prop("href", "/warehouse_manage//toReport.report?pageNo=" + jsonObj.totalPages + "&likeValue=" + jsonObj.likeValue)// 尾页
            })
        }

        function  selectBytotal(){
            var url ="/warehouse_manage/total.report";
            $.post(url, function(data) {
                var jsonObj = JSON.parse(data);
                $("#totalProducts").text(jsonObj.totalProducts);          // 总商品数
                $("#totalStockValue").text(jsonObj.totalStockValue+"￥");      // 总库存价值
            })
        }
    </script>
</head>
<body>
<div id="top">·当前位置： 库存报表</div>
<div id="contexttop">
    <table id="tab" border="1">
        <tr>
            <td colspan="9" height="50px">
                <input type="text" id="likeValueStr" title="商品ID、商品名称、类别" placeholder="商品ID、商品名称、类别" />
                <input type="button" value="查询" id="selectByValue"/>
            </td>
        </tr>

        <tr bgcolor="#cccccc">
            <th>商品ID</th>
            <th>商品名称</th>
            <th>类别</th>
            <th>当前库存</th>
            <th>预警值</th>
            <th>库存价值</th>
            <th>累计入库</th>
            <th>累计出库</th>
            <th>状态</th>
        </tr>
        <tbody id="tbodyList">
        </tbody>
    </table>
</div>
<div align="center" id="contextbotton">
    &nbsp;总记录数&nbsp;<span id="recordCount"></span>&nbsp;条&nbsp;共&nbsp;<span id="totalPages"></span>&nbsp;页
    &nbsp;<a id="firstPage" href="#">首页</a>
    &nbsp;<a id="prevPage" href="#">上一页</a>
    &nbsp;<a id="nextPage" href="#">下一页</a>
    &nbsp;<a id="tailPage" href="#">尾页</a>
    &nbsp;第&nbsp;<span id="pageNo"></span>&nbsp;页&nbsp;
</div>
<div class="stats">
    <h3>库存统计</h3>
    <p>总商品数: <strong><span id="totalProducts"></span></strong> | 总库存价值: <strong><span id="totalStockValue"></span></strong></p>
</div>
</body>
</html>